<template>
	<el-table :data="tableData" border size="mini" style="width: 100%" row-key="id">
		<el-table-column prop="work_order_type_name" label="类型" width="80" align="center">
			<template slot-scope="{ row }">
				<BFWorkOrderTypeTag :name="row.work_order_type_name" />
			</template>
		</el-table-column>
		<el-table-column prop="work_order_name" label="名称" min-width="190" align="center">
			<template slot-scope="{ row }">
				<BFViewDetailBtn className="text-black" :id="row.id" :name="row.work_order_name"
							size="mini" @toDetail="toWorkOrder" />
			</template>
		</el-table-column>
		<el-table-column prop="work_order_status_name" label="状态" width="80" align="center">
			<template slot-scope="{ row }">
				<BFStatusTag :name="row.work_order_status_name" />
			</template>
		</el-table-column>
		<el-table-column label="进度" width="170" align="center">
			<template slot="header">
			  进度_(<span style="color: orange">待审</span>+通过)/总数
			</template>
			<template slot-scope="{ row }">
			  <span>(<span :class="row.work_order_installed_to_check_num>0?'text_orange':''">
			    {{ row.work_order_installed_to_check_num }}</span>+
			    {{ row.work_order_installed_passed_num }})
			    /({{ row.work_order_total_num }})</span>
			  <span>
			    <el-progress
			      :percentage="getPercent(row.work_order_installed_to_check_num, row.work_order_installed_passed_num,row.work_order_total_num)"
			      :color="percentLimitColors"
			    ></el-progress>
			  </span>
			</template>
		</el-table-column>
		<el-table-column prop="work_order_exe_status_name" label="执行状态" width="80" align="center">
			<template slot-scope="{ row }">
				<BFWorkOrderExeStatusTag :name="row.work_order_exe_status_name" />
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
	import BFWorkOrderTypeTag from './BFWorkOrderTypeTag'
	import BFWorkOrderExeStatusTag from './BFWorkOrderExeStatusTag'
	import BFStatusTag from './BFStatusTag'
	import BFViewDetailBtn from './BFViewDetailBtn'
	import common from '@/utils/common.js';
	import { percentLimitColors, accAdd, accDiv, accMul, getPercentage } from '@/utils/util.js';
	import {
		cloneDeep
	} from 'lodash'
	export default {
		name: 'BussinessFlowComponentWorkOrderList',
		components: {
			BFWorkOrderTypeTag,
			BFStatusTag,
			BFWorkOrderExeStatusTag,
			BFViewDetailBtn
		},
		props: {
			tableData: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				percentLimitColors
			}
		},
		watch: {},
		mounted() {},
		methods: {
			getPercent(notPass, pass, total) {
			  if (total === 0) {
			    return 0
			  }
			  let sum = accAdd(notPass, pass)
			  return getPercentage(sum, total);
			},
			toWorkOrder(id){
				console.log(`前往工单详情：${id}`);
				common.messageWarning('当前为静态的假数据，无法跳转详情');
			}
		}
	}
</script>

<style lang="scss">
	.el-progress.el-progress--line {
		.el-progress__text{
			font-size: 8px !important;
		}
	}
</style>
